<% include ./side.html %>
<style scoped>
	.com_top_title:after{
		content:'';
		display:block;
		clear:both;
	}
	.block-time{
		display:flex;
		flex-direction: row;
		justify-content: space-between;
		background:transparent;
	}
	.block-time .item {
		width: 33.33333%;
		float: left;
		border-right: solid 1px #eee;
		overflow: hidden;
		padding: 20px; 
	}
	.block-time .com_h1 {
		font-size: 22px;
		color:#333;
		border-bottom: solid 1px #eee;
		padding-bottom: 10px;
		margin-bottom: 10px; 
		width:100%;
	}
	.block-time .item-full {
		float: left;
		overflow: hidden;
		display:flex;
		flex-wrap: wrap;
		width:49.5%;
		background:#fff;
		padding:20px;
		border-radius:5px;
		box-shadow: 0 1px 2px rgba(150,150,150,0.3);
	}
	.block-time .item-full:nth-child(:odd) {
		border-right: none; 
	}
	.block-time .item-full li {
		width: 25%;
		float: left;
		margin: 8px 0; 
		width:50%;
	}
	.block-time .item-full li h1 {
		font-size: 20px;
		color: #999; 
		font-weight:300;
	}
	.block-time .item-full h2 {
		font-size: 30px; 
	}
	.block-time .top-width {
		width: 100% !important; 
	}
	.sources-list {
		background: #fff;
		min-height:500px;
	}
	.sources-list .h1 {
		font-size: 22px;
		padding-bottom: 10px;
		margin-bottom: 10px; 
		font-weight:300;
	}
	.sources-list li {
		height: 35px;
		width: 100%;
		background: #f4f4f4;
		line-height: 35px;
		padding-left: 10px;
		position: relative;
		margin-bottom: 10px; 
	}
	.sources-list li:nth-child(odd) {
		background: #f9f9f9; 
	}
	.sources-list li:nth-child(even) {
		background: #eee; 
	}
	.sources-list li .bili {
		position: absolute;
		left: 0;
		top: 0;
		width: 300px;
		height: 35px;
		background: #ffeb3b; 
	}
	.sources-list li .bili.color1 {
		background: #3aa3f7; 
	}
	.sources-list li .bili.color2 {
		background: #25cc4e; 
	}
	.sources-list li .bili.color3 {
		background: #dacd5c; 
	}
	.sources-list li .bili.color4 {
		background: #cddc39; 
	}
	.sources-list li .s1 {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 35px;
		z-index: 10; 
	}
	.sources-list li .s1 span {
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis; 
	}
	.sources-list li .s1 span.name {
		width: 30%;
		padding-left: 10px; 
	}
	.sources-list li .s1 span.type {
		width: 150px; 
	}
	@media (max-width: 768px) {
		.block-time{
			flex-direction: column;
		}
		.block-time .item-full{
			width:100%;
		}
		.block-time .item-full li h1{
			font-size: 16px;
		}
		.block-time .item-full li h2{
			font-size: 20px;
		}
		.sources-list .h1{
			font-size:15px;
		}
		.com_but_block .btn{
			margin-right:5px;
		}
		.sources-list li .s1{
			font-size:12px;
		}
	}
	
</style>
<div class="com_content_body main pb100" id="pages" v-cloak>
	<div class="com_top_title">
		<h1 class="com_h1 fl">页面详情</h1>
		<commonsearch></commonsearch>
	</div>
	<div class="com_block mt20">
		<div><span class="text">完整URL：</span>{{datas.full_url}}</div>
		<div class="mt15"><span class="text">访问轨迹：</span><a :href="'/web/analysisdetail?markuser='+datas.mark_user">查看用户访问轨迹详情</a></div>
	</div>
	<!-- 页面平均耗时说明 -->
	<div class="block-time mt20">
		<div class="item-full div1">
			<h1 class="com_h1">页面平均耗时</h1>
			<ul>
				<li>
					<h1>加载耗时(s)</h1>
					<h2 class="red">{{datas.load_time|toFixed(true)}}</h2>
				</li>
				<li>
					<h1>白屏耗时(ms)</h1>
					<h2 class="red">{{datas.white_time|toFixed}}</h2>
				</li>
				<li>
					<h1>DOM构建耗时(s)</h1>
					<h2>{{datas.dom_time|toFixed(true)}}</h2>
				</li>
				<li>
					<h1>解析DOM耗时(s)</h1>
					<h2>{{datas.analysisDom_time|toFixed(true)}}</h2>
				</li>
				<li>
					<h1>DNS解析耗时(ms)</h1>
					<h2>{{datas.dns_time|toFixed}}</h2>
				</li>
				<li>
					<h1>TCP连接耗时(ms)</h1>
					<h2>{{datas.tcp_time|toFixed}}</h2>
				</li>
				<li>
					<h1>request请求耗时(ms)</h1>
					<h2>{{datas.request_time|toFixed}}</h2>
				</li>
				<li>
					<h1>页面准备耗时(ms)</h1>
					<h2>{{datas.ready_time|toFixed}}</h2>
				</li>
			</ul>
		</div>
		<div class="item-full div1">
			<h1 class="com_h1">页面访问者信息</h1>
			<ul>
				<li>
					<h1>浏览器类型</h1>
					<h2>{{environment.browser}}</h2>
				</li>
				<li>
					<h1>浏览器版本号</h1>
					<h2>{{environment.borwser_version}}</h2>
				</li>
				<li>
					<h1>用户操作系统</h1>
					<h2>{{environment.system}}</h2>
				</li>
				<li>
					<h1>操作系统版本</h1>
					<h2>{{environment.system_version}}</h2>
				</li>
				<li>
					<h1>来访省份</h1>
					<h2>{{environment.province||'未知'}}</h2>
				</li>
				<li>
					<h1>来访城市</h1>
					<h2>{{environment.city||'未知'}}</h2>
				</li>
				<li>
					<h1>来访者IP</h1>
					<h2>{{environment.ip}}</h2>
				</li>
				<li>
					<h1>访问时间</h1>
					<h2>{{environment.create_time|date('/',true)}}</h2>
				</li>
			</ul>
		</div>
	</div>
	<!-- 资源请求列表 -->
	<div class="com_but_block mt30">
		<button @click="isResourceShow='ALL'" class="btn" :class="{'btn-main':isResourceShow=='ALL'?true:false}">ALL</button>
		<button @click="isResourceShow='XHR'" class="btn" :class="{'btn-main':isResourceShow=='XHR'?true:false}">XHR</button>
		<button @click="isResourceShow='JS'" class="btn" :class="{'btn-main':isResourceShow=='JS'?true:false}">JS</button>
		<button @click="isResourceShow='CSS'" class="btn" :class="{'btn-main':isResourceShow=='CSS'?true:false}">CSS</button>
		<button @click="isResourceShow='IMG'" class="btn" :class="{'btn-main':isResourceShow=='IMG'?true:false}">IMG</button>
		<button @click="isResourceShow='OTHER'" class="btn" :class="{'btn-main':isResourceShow=='OTHER'?true:false}">OTHER</button>
	</div>
	<div class="com_block sources-list">
		<h1 class="h1">页面资源请求详情信息 <span class="fr">资源总耗时：{{totalTime|toFixed(true)}}</span></h1>
		<li v-for="item in sourceslist">
			<span class="bili" :class="[{'color1':item.type==='css','color2':item.type==='img','color3':item.type==='xmlhttprequest','color4':item.type==='script'}]"
			 :style="{'width':item.proportion+'%'}"></span>
			<div class="s1">
				<span class="name" :title="item.name">{{item.name}}</span>
				<span class="type" :title="item.type">{{item.type}}</span>
				<span class="type red">{{item.duration|toFixed}}</span>
				<span class="type">{{item.decodedBodySize|toSize}}</span>
			</div>
		</li>
	</div>
</div>

<script>
	new Vue({
		el: '#pages',
		data: function () {
			return {
				datas: {},
				environment:{},
				isLoadend: false,
				id: util.getQueryString('id')||'',
				appId: util.getStorage('local', 'appId'),
				sourceslist:[],
				copysourceslist:[],
				totalTime:0,
				isResourceShow:'ALL'
			}
		},
		watch:{
			'isResourceShow':function(oldVal, newVal) {
				if(oldVal === newVal) return;
				this.getNewResource();
			}
		},
		filters: {
			toFixed: window.Filter.toFixed,
			toSize: window.Filter.toSize,
			date: window.Filter.date,
			limitTo: window.Filter.limitTo,
		},
		computed: {
			filterRedsourceslist: function () {
				var self = this
				return self.sourceslist.filter(function (resource) {
					let result = true;
					switch(this.isResourceShow){
						case 'ALL':
							result = true;
							break;
						case 'XHR':
							result = resource.type == 'xmlhttprequest' || resource.type == 'fetchrequest' ? true : false;
							break;
						case 'JS':
							result = resource.type == 'script'? true : false;
							break;
						case 'CSS':
							result = resource.type == 'link' || resource.type == 'css' ? true : false;
							break;
						case 'IMG':
							result = resource.type == 'img' ? true : false;
							break;
						case 'OTHER':
							result = resource.type == 'other' ? true : false;
							break;						
					}
					return result;
				})
			}
		},
		mounted() {
			this.getinit();
		},
		methods: {
			getinit(api, pageName) {
				this.isLoadend = false;
				util.ajax({
					type:'get',
					url: config.baseApi + 'api/v1/pages/getPageDetails',
					data: {
						appId:this.appId,
						id:this.id,
					},
					success: data => {
						this.isLoadend = true;
						this.datas = data.data;
						let sourceslist = data.data.resource_list;
						if(sourceslist.length){
							sourceslist.forEach(item=>{
								this.totalTime+=parseFloat(item.duration);
							})
							sourceslist.forEach(item=>{
								let duration = parseFloat(item.duration);
								item.proportion = (duration/this.totalTime)*100 + 0.1;
							})
							this.sourceslist = this.copysourceslist = sourceslist;
						}
						

						this.getPageEnvironment(data.data.mark_page)
					}
				})
			},
			getPageEnvironment(markPage){
				util.ajax({
					type: 'get',
					url: config.baseApi + 'api/v1/environment/getEnvironmentForPage',
					data: {
						appId: this.appId,
						markPage: markPage,
					},
					success: data => {
						this.environment = data.data;
					}
				})
			},
			getNewResource(){
				const _this = this;
				this.sourceslist = this.copysourceslist.filter(function (resource) {
					let result = true;
					switch (_this.isResourceShow) {
						case 'ALL':
							result = true;
							break;
						case 'XHR':
							result = (resource.type == 'xmlhttprequest' || resource.type == 'fetchrequest') ? true : false;
							break;
						case 'JS':
							result = (resource.type == 'script') ? true : false;
							break;
						case 'CSS':
							result = (resource.type == 'link' || resource.type == 'css') ? true : false;
							break;
						case 'IMG':
							result = (resource.type == 'img') ? true : false;
							break;
						case 'OTHER':
							result = (resource.type == 'other') ? true : false;
							break;
					}
					return result;
				})
			},
		}
	})
</script>